<template>
  <el-card>
    <!-- 查询区域 -->
    <div class="search-bar">
      <el-input v-model="searchForm.userName" placeholder="用户名/编号/手机号" clearable style="width: 180px;" />
      <el-select v-model="searchForm.memberLevel" placeholder="会员等级" clearable style="width: 140px;">
        <el-option label="黄金会员" value="黄金会员" />
        <el-option label="白银会员" value="白银会员" />
        <!-- 其他等级 -->
      </el-select>
      <el-input v-model="searchForm.userTag" placeholder="用户标签" clearable style="width: 140px;" />
      <el-select v-model="searchForm.registerChannel" placeholder="注册渠道" clearable style="width: 140px;">
        <el-option label="官网" value="官网" />
        <el-option label="App" value="App" />
        <!-- 其他渠道 -->
      </el-select>
      <el-date-picker v-model="searchForm.birthday" type="daterange" range-separator="至" start-placeholder="注册时间" end-placeholder="注册时间" style="width: 220px;" />
      <el-button type="primary" @click="onSearch">查询</el-button>
      <el-button @click="onReset">重置</el-button>
      <el-button type="text" style="margin-left: 8px;">高级筛选</el-button>
    </div>
    <!-- 表格 -->
    <el-table :data="tableData" border style="width: 100%; margin-top: 16px;">
      <el-table-column type="selection" width="50" align="center" />
      <el-table-column prop="id" label="ID编号" align="center" width="120" />
      <el-table-column prop="userName" label="用户账号" align="center" />
      <el-table-column prop="memberLevel" label="会员等级" align="center" />
      <el-table-column prop="userStatus" label="用户状态" align="center" width="100">
        <template #default="scope">
          <span style="color: #52c41a; font-weight: bold;">
            <i class="el-icon-circle-check" style="font-size: 12px; margin-right: 4px; color: #52c41a;"></i>
            {{ scope.row.userStatus }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="orderCount" label="订单记录" align="center" width="100">
        <template #default="scope">
          <span style="color: #1890ff; cursor: pointer;" @click="onOrderDetail(scope.row)">{{ scope.row.orderCount }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="consumeAmount" label="消费金额" align="center" width="120">
        <template #default="scope">
          ￥{{ 200 }}
        </template>
      </el-table-column>
      <el-table-column prop="availablePoints" label="可用积分" align="center" width="100" />
      <el-table-column label="操作" align="center" width="180">
        <template #default="scope">
          <el-button type="primary" link size="small" @click="onDetail(scope.row)">详情</el-button>
          <el-button type="primary" link size="small" @click="onEdit(scope.row)">编辑</el-button>
          <el-button type="danger" link size="small" @click="Del(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div style="margin-top: 20px; display: flex; justify-content: flex-end;">
      <el-pagination
        v-model:current-page="pageIndex"
        v-model:page-size="pageSize"
        :total="totalCount"
        :page-sizes="[5, 10, 20, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        @current-change="getList"
        @size-change="onSizeChange"
        background
      />
    </div>
    <!-- 详情弹窗 -->
    <el-dialog v-model="detailDialogVisible" title="用户详情" width="400px">
      <el-descriptions :column="1" border>
        <el-descriptions-item label="ID">{{ detailRow.id }}</el-descriptions-item>
        <el-descriptions-item label="用户名">{{ detailRow.userName }}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{ detailRow.phoneNumber }}</el-descriptions-item>
        <el-descriptions-item label="会员等级">{{ detailRow.memberLevel }}</el-descriptions-item>
        <el-descriptions-item label="性别">{{ detailRow.gender }}</el-descriptions-item>
        <el-descriptions-item label="出生日期">{{ detailRow.birthday }}</el-descriptions-item>
        <el-descriptions-item label="城市">{{ detailRow.city }}</el-descriptions-item>
        <el-descriptions-item label="职业">{{ detailRow.occupation }}</el-descriptions-item>
        <el-descriptions-item label="签名">{{ detailRow.signature }}</el-descriptions-item>
        <el-descriptions-item label="可用积分">{{ detailRow.availablePoints }}</el-descriptions-item>
        <el-descriptions-item label="用户状态">{{ detailRow.userStatus }}</el-descriptions-item>
        <el-descriptions-item label="订单数">{{ detailRow.orderCount }}</el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <el-button @click="detailDialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </el-card>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus'

const tableData = ref([])
const totalCount = ref(0)
const pageIndex = ref(1)
const pageSize = ref(10)

const searchForm = reactive({
    userName: '',
  memberLevel: '',
  userTag: '',
  registerChannel: '',
  birthday: [],
})

const getList = async () => {
  const res = await axios.get('http://localhost:5161/api/UserManagement/Handle', {
    params: {
      PageIndex: pageIndex.value,
      PageSize: pageSize.value,
      userName: searchForm.userName,
      memberLevel: searchForm.memberLevel,
      userTag: searchForm.userTag,
      registerChannel: searchForm.registerChannel,
      birthday: searchForm.birthday
    }
  })
  if (res.data.code === 0) {
    tableData.value = res.data.data.data
    totalCount.value = res.data.data.totalCount
  }
}

const onSearch = () => {
  pageIndex.value = 1
  getList()
}
const onReset = () => {
  searchForm.userName = ''
  searchForm.memberLevel = ''
  searchForm.userTag = ''
  searchForm.registerChannel = ''
  searchForm.birthday = []
  pageIndex.value = 1
  getList()
}
const onSizeChange = (val: number) => {
  pageSize.value = val
  pageIndex.value = 1
  getList()
}

// 详情弹窗
const detailDialogVisible = ref(false)
const detailRow = ref<any>({})
const onDetail = (row: any) => {
  detailRow.value = row
  detailDialogVisible.value = true
}

// 编辑（添加一个空的占位函数，根据实际需求填写逻辑）
const onEdit = (row: any) => {
  console.log('编辑用户:', row)
  // TODO: 添加编辑用户的逻辑
}

// 查看订单详情（添加一个空的占位函数，根据实际需求填写逻辑）
const onOrderDetail = (row: any) => {
  console.log('查看订单详情:', row)
  // TODO: 添加查看订单详情的逻辑
}

//删除
const Del = (id: any) => {
    ElMessageBox.confirm(
        '确认删除该用户吗？',
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            axios.put("http://localhost:5153/api/UserManagement/UserManagementDel?Id=" + id).then((res) => {
                if (res.data.code == 0) {
                    ElMessage.success("删除成功")
                    getList()
                }
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消删除',
            })
        })
}

onMounted(getList)
</script>

<style scoped>
.search-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.el-button[type="primary"][link] {
  color: #409eff;
}
.el-button[type="danger"][link] {
  color: #f5222d;
}
</style>